
<template>
    <div class="div-top">
        <SelectInput 
            :optionsArr="optionsArr"
            @update:optionsArr="optionsArr = $event"
            :value="textValue"
            @on-change-input="onChangeInput"
        ></SelectInput>
    </div>
</template>
 
<script setup>
import SelectInput from './components/SelectInput.vue' 
import {ref, reactive} from 'vue'
  const optionsArr = reactive(
    [
        { id: 1, name: 'a' },
        { id: 2, name: 'bb' },
        { id: 3, name: 'ccc' },
        { id: 4, name: 'dddd' },
        { id: 5, name: 'eeeee' },
        { id: 6, name: 'fffff' },
        { id: 7, name: 'gggggg' },
        { id: 8, name: 'hhhhhhh' },
        { id: 9, name: 'iiiiiiii' }
    ])
    const textValue = ref(null)
    const onChangeInput = function (newValue) {
        textValue.value = newValue
    }
</script>
<style>
body {
    font-size: 12px;
    color: #566270;
    background-color: #fffff0;
    margin: 0;
    overflow: hidden;
}
.div-top {
    display: flex;
}
</style>